<template>
    <Modal v-model="visible" width="900" @on-visible-change="visibleChange">
        <p slot="header">
            <Icon type="logo-buffer" :size="22"/>
            <span style="margin-left: 0.5em">{{title}}</span>
        </p>
        <Form ref="objectData" :disabled="!canEdit"  :model="objectData.shareUser" :rules="ruleValidate" label-colon autocomplete="off"  :label-width="100">
            <Row>
                <Col span="12">
                    <FormItem label="员工编号"  prop="serialNo">
                      <label>
                        <Input v-model="objectData.shareUser.serialNo"></Input>
                      </label>
                    </FormItem>
                </Col>
                <Col span="12">
                    <FormItem label="所属部门"  prop="comCode">
                      <code-type-tag :disabled="!canEdit" v-model="objectData.shareUser.comCode" is-tree code-type="organization" placeholder="请选择所属机构"/>
                    </FormItem>
                </Col>
                <Col span="12">
                    <FormItem label="用户名"  prop="username">
                      <label>
                        <Input v-model="objectData.shareUser.username"></Input>
                      </label>
                    </FormItem>
                </Col>
                <Col span="12">
                    <FormItem label="工作岗位"  prop="username">
                      <label>
                        <Select v-model="positionIds" multiple :max-tag-count="2">
                            <Option v-for="item in positionList" :value="item.id" :key="item.id">{{ item.positionName }}</Option>
                        </Select>
                      </label>
                    </FormItem>
                </Col>
                <Col span="12">
                    <FormItem label="姓名"  prop="name">
                      <label>
                        <Input v-model="objectData.shareUser.name"></Input>
                      </label>
                    </FormItem>
                </Col>
                <Col span="12">
                    <FormItem label="性别"  prop="gender">
                        <RadioGroup v-model="objectData.shareUser.gender">
                            <Radio label="0">男</Radio>
                            <Radio label="1">女</Radio>
                        </RadioGroup>
                    </FormItem>
                </Col>
                <Col span="12">
                    <FormItem label="证件类型"  prop="identityType">
                      <code-type-tag v-if="visible" v-model="objectData.shareUser.identityType" code-type="PCredentialType" placeholder="请选择证件类型"/>
                    </FormItem>
                </Col>
                <Col span="12">
                    <FormItem label="证件号码"  prop="identityNo">
                      <label>
                        <Input v-model="objectData.shareUser.identityNo" placeholder="请选择证件号码"></Input>
                      </label>
                    </FormItem>
                </Col>
                <Col span="12">
                    <FormItem label="手机号"  prop="mobile">
                      <label>
                        <Input v-model="objectData.shareUser.mobile"></Input>
                      </label>
                    </FormItem>
                </Col>
                <Col span="12">
                    <FormItem label="联系地址" prop="address">
                      <label>
                        <Input v-model="objectData.shareUser.address"></Input>
                      </label>
                    </FormItem>
                </Col>
            </Row>
        </Form>
        <div slot="footer" v-show="canEdit">
            <Button @click="cancel">取消</Button>
            <Button type="primary" @click="handleSubmit('objectData')">保存</Button>
        </div>
    </Modal>
</template>

<script>
import {getAllList} from "@/api/positionApi"
import {ruleValidate} from '@/views/group_management/staff/validator/StaffRules'
import {getById,saveOrUpdate} from "@/api/userApi"
import StaffDataProvider from '@/views/group_management/data/StaffDataProvider'
import codeTypeTag from '@/components/codeType/code-type-tag'
export default {
  name: "organization-detail",
  components: {codeTypeTag },
  props:{
    userId:{
      type: [Number,String],
      required: false
    },
    showModal: {
      type: Boolean,
      required: true
    },
    canEdit: {
      type: Boolean,
      required: true
    },
    reloadData: {
      type: Boolean,
      required: false,
      default: false
    },
    title: {
      type: String,
      required: true,
    }
  },
  data () {
    return {
      visible: this.showModal,
      objectData: StaffDataProvider.createStaffVo(),
      ruleValidate,
      positionIds: [],
      organizationTrees:[],
      positionList:[]
    }
  },
  mounted(){
    this.loadData()
  },
  watch: {
    showModal (val) {
      this.visible = val
    },
    visible (val) {
      if (val) {
        if (this.userId){
          getById(this.userId).then(res=>{
            this.objectData = res
            this.positionIds = []
            this.objectData.positionIds.forEach(p=>{
              this.positionIds.push(p.id)
            })
          })
        }
      }else{
        this.positionIds = []
        this.objectData = StaffDataProvider.createStaffVo()
      }
    }
  },
  methods: {
    handleSubmit(name) {
      this.$refs[name].validate((valid) => {
        console.log("valid",valid)
        if (valid) {
          this.objectData.positionIds = []
          this.positionIds.forEach(item=>{
            this.objectData.positionIds.push({id:item})
          })
          let action = 'save';
          if (this.objectData.id){
            action= 'update'
          }
          saveOrUpdate(this.objectData,action).then(res=>{
            this.$Message.success(res)
            this.visible = false
            this.$emit('callbackByOk')
          })
        }
      })
    },
    loadData(){
      getAllList().then(res=>{
        this.positionList = res
      })
    },
    setSelectRoleItem(){
      this.roleData.forEach(role => {
        if (this.objectData.roleIds.length>0){
          this.objectData.roleIds.forEach(roleId => {
            this.setCheckedOfRoleTree(role,roleId.id)
          })
        }else {
          this.setCheckedOfRoleTree(role,'')
        }
      })
    },
    setCheckedOfRoleTree(temp,roleId){
      let needFind = true;
      while (needFind){
        if (this.canEdit){
          if(temp.id){
            temp.disabled = false
          }
        }else if(temp.id||temp.children){
          temp.disabled = true
        }
        if (roleId===temp.id){
          if (temp.children===null||temp.children===undefined){
            temp.checked=true
          }
          needFind = false;
        }else if (temp.children) {
          temp.children.forEach(role=>{
            this.setCheckedOfRoleTree(role,roleId);
            needFind = false;
          })
        }else{
          needFind = false;
        }
      }
    },
    restSelectRoleItem(){
      this.roleData.forEach(role => {
        this.restCheckedOfRoleTree(role)
      })
    },
    restCheckedOfRoleTree(temp){
      let needFind = true;
      while (needFind){
        temp.checked = false
        if (temp.id||temp.children){
          temp.disabled = false
        }
        if (temp.children) {
          temp.indeterminate = false
          temp.children.forEach(role=>{
            this.restCheckedOfRoleTree(role);
            needFind = false;
          })
        }else{
          needFind = false;
        }
      }
    },
    cancel () {
      this.visible = false
    },
    visibleChange(val){
      if (!val){
        this.$emit('callbackByCancel')
      }
    },

  }
}
</script>

<style scoped>

</style>
